<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid #ccc;
            border-collapse: collapse;
            text-align: center;
        }

        td {
            border: 1px solid #ccc;
        }

        .col1,
        .col3 {
            width: 220px;
        }

        .col2,
        .choice {
            color: #FF7300;
            font-size: 40px;
            font-weight: bold;
        }

        .ready {
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
    </style>
     <script>
        var winCount=0;
        var loseCount=0;
        var drawCount=0;
        
        function doSelect(obj) {
            var selectValue = obj.value;//获取当前选中项的value值
            var now=document.getElementById("now");
            if (selectValue == 1) {
                now.src="img/st.jpg";
            } else if (selectValue == 2) {
                now.src="img/jd.jpg";
            } else if (selectValue == 3) {
                now.src="img/bu.jpg";
            }else{
                now.src="img/zb.jpg";
            }

        }

        function doConfirm(){
            var down=document.getElementById("down");
            var you=document.getElementById("you");
            var computer=document.getElementById("computer");
            var msg=document.getElementById("msg");
            var total=document.getElementById("total");
            var win=document.getElementById("win");
            var lose=document.getElementById("lose");
            var draw=document.getElementById("draw");
            var selectValue = down.value;
            if(selectValue==0){//如果没有选择，需要先选择
                alert("请先做出选择，再确认：");
                return;
            }

            //你出拳
            if (selectValue == 1) {
                you.src="img/st.jpg";
            } else if (selectValue == 2) {
                you.src="img/jd.jpg";
            } else if (selectValue == 3) {
                you.src="img/bu.jpg";
            }
           
            //电脑出拳
            // [1,3]

            var n=parseInt(Math.random()*3+1);
            if (n == 1) {
                computer.src="img/st.jpg";
            } else if (n == 2) {
                computer.src="img/jd.jpg";
            } else if (n == 3) {
                computer.src="img/bu.jpg";
            }

            var minus=selectValue-n;//计算差值
            if(minus==0){//平局
                drawCount++;
                msg.innerHTML="平局";
            }else if(minus==-1 || minus==2){
                winCount++;
                msg.innerHTML="你赢了";
            }else{
                loseCount++;
                msg.innerHTML="你输了";
            }


            win.innerHTML=winCount;
            draw.innerHTML=drawCount;
            lose.innerHTML=loseCount;
            total.innerHTML=winCount+drawCount+loseCount;





        }
    </script>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td class="col1">
                    <p>你</p>
                    <img src="img/zb.jpg" alt="" id="you">
                </td>
                <td class="col2">VS</td>
                <td class="col3">
                    <p>电脑</p>
                    <img src="img/zb.jpg" alt="" id="computer">
                </td>
            </tr>
            <tr>
                <td colspan="3" class="ready" id="msg">Are you ready?</td>
                <!-- <td></td>
                <td></td> -->
            </tr>
            <tr>
                <td>
                    <p>你选择了:</p>
                    <img src="img/zb.jpg" alt="" id="now">
                </td>
                <td class="choice">Choice</td>
                <td>
                    <p>请选择出拳:</p>
                    <p>
                        <select name="" id="down" onchange="doSelect(this)">
                            <option value="0">请选择</option>
                            <option value="1">石头</option>
                            <option value="2">剪刀</option>
                            <option value="3">布</option>
                        </select>
                        <input type="button" value="确认出拳" onclick="doConfirm()">
                    </p>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    总数: <span id="total">0</span>&nbsp;&nbsp;
                    胜利: <span id="win">0</span>&nbsp;&nbsp;
                    失败: <span id="lose">0</span>&nbsp;&nbsp;
                    平局: <span id="draw">0</span>
                    <!-- <td></td>
                <td></td> -->
            </tr>
        </tbody>
    </table>
   
</body>

</html>